<script setup lang="ts">
import { ref, reactive } from "vue"
import { useUserStore } from "@/store/modules/user"
const { personnelList } = useUserStore() // 角色人员
const emit = defineEmits<{
  (e: "update:modelValue", value: any): void
}>()
const treedata = ref([])
// const defaultProps = {
//   children: 'sysUserList',
//   label: 'name',
// }
console.log(personnelList)
if (personnelList) {
  treedata.value = personnelList.map((it) => {
    it.name = it.roleName
    it.id = it.roleId + "-roleId"
    it.roleBoor = true
    return it
  })
}
const value = ref()
const treeqx = ref()
const defaultPropsdata = {
  children: "sysUserList",
  label: "name",
  disabled: function (data, node) {
    //带子级的节点不能选中
    // if (data.sysUserList && data.sysUserList.length > 0) {
    //   return true
    // } else {
    return false
    // }
  }
}
const RefIds = ref([])

//在methods里
const handleCheckChange = (data: any, checked) => {
  //子级只能单选
  console.log(data, checked, "--handleCheckChange--")
  if (data.roleBoor) {
    return
  }
  if (checked) {
    RefIds.value.push(data.id)
  } else {
    let key = RefIds.value.indexOf(data.id)
    if (key != -1) {
      RefIds.value.splice(key, 1)
    }
  }
  emit("update:modelValue", RefIds.value.join(","))
}
</script>
<template>
  <div class="personnel_box">
    <!-- :check-strictly="false" -->
    <el-tree
      :data="treedata"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[]"
      :default-checked-keys="[]"
      :props="defaultPropsdata"
      ref="treeqx"
      empty-text="加载中，请稍候"
      @check-change="handleCheckChange"
    />
    <!-- <el-tree-select
        v-model="value"
        :data="treedata"
        :check-strictly="false"
        :render-after-expand="false"
        :props="defaultProps"
        show-checkbox
      /> -->
  </div>
</template>
<style scoped lang="scss">
.personnel_box {
  width: 100%;
  height: auto;
  max-height: 30vh;
  overflow: hidden;
  overflow-y: auto;
}
</style>
